<template>
    <div class="message" v-if="rightPage==1" v-scroll-bottom='session.messages'>
        <ul v-if="session">
            <li style="list-style-type:none" class="message-li" v-for="item in session.messages" :key="item.id">
                <p class="time">
                    <span v-if="isNewMinute(item.date)">{{ calculateTime(item.date) }}</span>
                </p>
                <div class="main" v-if="item.type==='TEXT'" :class="{ self: item.self }">
                    <img class="avatar" width="30" height="30" :src="item.self ? user.avatar : session.user.img"/>
                    <div class="text">{{ item.content }}</div>
                </div>
                <div  v-if="item.type==='FILE'" :class="{ self: item.self }">
                    <img class="avatar" width="30" height="30" :src="item.self ? user.avatar : session.user.img"/>
                    <div class="file" v-if="item.content" @click="openUrl(item.content.url)">
                        <img :src="icons.file.img" :alt="icons.file.name" class="file-icon" height="15"/>
                        {{item.content.name}}
                    </div>
                </div>

            </li>
        </ul>
    </div>
    <div class="message" v-else-if="rightPage==3">

    </div>
</template>

<script>
import {useStore} from "vuex";
import {ref, computed, nextTick} from "vue";
import {getFullDate, isToday, isYesterday, getTime} from '../utils/historytimeDisplay';
import FileIcon from '../assets/img/file.svg'
import CloseIcon from "../assets/img/close.svg";

export default {
    props: {
        icons: {
            type: Object,
            default: function () {
                return {
                    file: {
                        img: FileIcon,
                        name: 'default'
                    },
                    closeSvg: {
                        img: CloseIcon,
                        name: 'default'
                    }
                }
            }
        },
    },
    setup(props) {
        let store = useStore()
        let isNew = ref(true);
        let latestMinute = 0;

        //聊天记录时间判断
        function calculateTime(time) {
            if (isToday(new Date(time))) {
                return getTime(new Date(time));
            } else if (isYesterday(time)) {
                return '昨天  ' + getTime(new Date(time));
            } else {
                return getFullDate(new Date(time));
            }
        }

        function isNewMinute(time) {
            const date = new Date(time)
            isNew = (date * 1000 - latestMinute * 1000) >= 60000000
            // console.log('diff',(date*1000 - latestMinute*1000))
            // console.log('isNew',isNew)
            latestMinute = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes())
            return isNew
        }

        const openUrl=(url)=>{
            window.open(url,"_self")
        }

        return {
            rightPage:computed(() => store.state.rightPage),
            session: computed(() => store.state.session),
            user: computed(() => store.state.user),
            isNew,
            isNewMinute,
            calculateTime,
            openUrl,
        };
    },
    directives: {
        // 发送消息后滚动到底部
        'scroll-bottom': function (el) {
            nextTick(() => {
                el.scrollTop = el.scrollHeight - el.clientHeight;
            });
        }
    },


}
</script>

<style scoped>
.message {
    height: 440px;
    padding: 10px 15px;
    overflow-y: scroll;
}

.message::-webkit-scrollbar { /*滚动条整体样式*/

    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

}

.message::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 5px rgba(233, 231, 231, 0.2);

    background: #e6e4e4;

}

.message::-webkit-scrollbar-track { /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(236, 235, 235, 0.2);

    border-radius: 10px;

    background: #EDEDED;

}

.message-li {
    margin-bottom: 15px;
}

.time {
    margin: 7px 0;
    text-align: center;
}

.time span {
    display: inline-block;
    padding: 0 18px;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    background-color: #dcdcdc;
}

.avatar {
    float: left;
    margin: 0 10px 0 0;
    border-radius: 3px;
}

.text {
    display: inline-block;
    position: relative;
    padding: 0 10px;
    /*max-width: ~ 'calc(100% - 40px)';*/
    min-height: 30px;
    line-height: 2.5;
    font-size: 12px;
    text-align: left;
    word-break: break-all;
    background-color: #fafafa;
    border-radius: 4px;
}
.file {
    display: inline-block;
    position: relative;
    padding: 0 10px;
    min-height: 60px;
    min-width: 80px;
    line-height: 2.5;
    font-size: 12px;
    text-align: left;
    word-break: break-all;
    background-color: lightgrey;
    border-radius: 2px;
}
.file-icon{
    margin-top:5px;
    width:40px;
    height:40px;
}

.text :before {
    content: " ";
    position: absolute;
    top: 9px;
    right: 100%;
    border: 6px solid transparent;
    border-right-color: #fafafa;
}

.self {
    text-align: right;
}

.self .avatar {
    float: right;
    margin: 0 0 0 10px;
}

.self .text {
    background-color: #b2e281;
}

.self .text :before {
    right: inherit;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #b2e281;
}


</style>